﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>silder2</title>
    <link href="css/base.2.1.0.css" rel="stylesheet" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <style type="text/css">
        .i-slider { position: relative; width: 680px; height: 278px; overflow: hidden; }
        .i-slider .i-prev, .i-slider .i-next { background: rgba(0,0,0,.6) url(images/slider2/icon-arrow.png) no-repeat; position: absolute; z-index: 5; top: 50%; height: 50px; width: 30px; margin-top: -25px; opacity: 0; cursor: pointer; transition: opacity ease-in-out .3s; }
        .i-slider:hover .i-prev, .i-slider:hover .i-next { opacity: 1;  }
        .i-slider .i-prev { left:0; border-radius:0 5px 5px 0;background-position: -30% 50%; }
        .i-slider .i-next { right: 0; border-radius: 5px 0 0 5px; background-position: 130% 50%; }
        .i-slider-page { position:absolute;z-index:5;bottom:10px;width:100%;box-sizing:border-box;text-align:center; }
        .i-slider .ui-pager-item { cursor:pointer; display: inline-block; width: 10px; height: 10px; margin: 0 5px; border: 2px solid #fff; border-color: rgba(0,0,0,.1); border-radius: 10px; text-align: left; overflow: hidden; background: #f5f5f5; background: rgba(0,0,0,0.4); transition: all .2s; }
        .i-slider .ui-pager-item.active { background: #fff; background: rgba(255,255,255,0.4); border-color: #757575; border-color: rgba(0,0,0,0.4); }

        .i-slider .i-slider-item { position: relative; /*transition: all ease-in-out .3s;*/ left: 0;}
        .i-slider .i-slider-item .i-item { display:none;top:0;left:0;box-sizing:border-box; transition:opacity ease-in-out .5s; opacity:0; }
        .i-slider .i-slider-item .i-item.active { display:block; opacity:1; }
        .i-slider .i-slider-item .i-item.scroll { display: block; opacity: 1;}
        .i-slider .i-slider-item .i-item img{ max-width:100%; }
    </style>
</head>
<body>
    <div class="container" style="margin:50px;padding:0;box-sizing:content-box">
        <div class="i-slider">
            <div class="i-slider-item clearfix">
                <div class="i-item active"><a href="#"><img src="images/slider2/5a3ce71929f9a5210.jpg" /></a></div>
                <div class="i-item"><a href="#"><img src="images/slider2/5a405bc3f326b9918.png" /></a></div>
                <div class="i-item"><a href="#"><img src="images/slider2/5a3f0abe5111a696.png" /></a></div>
                <div class="i-item"><a href="#"><img src="images/slider2/5a405ad2b2d484830.png" /></a></div>
            </div>
            <div class="i-prev"></div>
            <div class="i-next"></div>
            <div class="i-slider-page">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        !function ($, w) {
            $.fn.slider = function (option) {
                var settings = {
                    that: $(this),
                    item: $(this).find('.i-item'),
                    len: $(this).find('.i-item').length,
                    page: $(this).find('.i-slider-page'),
                    type: 'fade', time: 3e3,
                    prev: $(this).find('.i-prev'),
                    next: $(this).find('.i-next'),
                    callback: function () { },
                    status: !1
                };
                settings = $.extend(settings, option);
                !function () {
                    if (!Array.prototype.map) {
                        Array.prototype.map = function (callback, thisArg) {
                            var T, A, k;
                            if (this == null)
                                throw new TypeError(" this is null or not defined");
                            var O = Object(this);
                            var len = O.length >>> 0;
                            if (Object.prototype.toString.call(callback) != "[object Function]")
                                throw new TypeError(callback + " is not a function");

                            if (thisArg)
                                T = thisArg;
                            A = new Array(len);
                            k = 0;
                            while (k < len) {
                                var kValue, mappedValue;
                                if (k in O) {
                                    kValue = O[k];
                                    mappedValue = callback.call(T, kValue, k, O);
                                    A[k] = mappedValue;
                                }
                                k++;
                            }
                            return A;
                        };
                    }
                }();
                //init
                var page_item = settings.item.toArray().map(function (ele, idx) {
                    $(ele).attr('data-idx', idx);
                    return '<div class="ui-pager-item"></div>';
                });
                settings.page.html(page_item.join(' '));
                settings.page.find('.ui-pager-item').eq(0).addClass('active');
                if (settings.type == "scroll") {
                    settings.item.css({ 'float': 'left' }).addClass('scroll');
                    settings.that.find('.i-slider-item').css({ 'width': settings.len * 100 + '%' });
                }

                //browser support Css3
                function supportCss3(style) {
                    var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpString = [],
                        htmlStyle = document.documentElement.style,
                        _toHumb = function (string) {
                            return string.replace(/-(\w)/g, function ($0, $1) {
                                return $1.toUpperCase();
                            });
                        };
                    for (i in prefix)
                        humpString.push(_toHumb(prefix[i] + '-' + style));
                    humpString.push(_toHumb(style));
                    for (i in humpString)
                        if (humpString[i] in htmlStyle) return true;
                    return false;
                }
                settings.supportCss3 = supportCss3('transition');

                //!0 left or !1 right
                var _func = function (direction, n_idx, next) {
                    var _this = settings.that.find(".i-item.active"), idx = settings.item.index(_this[0]);
                    if (settings.type == 'fade') {
                        if (!n_idx) {
                            if (direction) {
                                n_idx = (idx - 1) < 0 ? (settings.len - 1) : idx - 1;
                                next = settings.item.eq(n_idx);
                            } else {
                                n_idx = (settings.len - 1) >= (idx + 1) ? (idx + 1) : 0;
                                next = settings.item.eq(n_idx);
                            }
                        }
                        if (settings.supportCss3) {
                            settings.item.removeClass('active').eq(idx).css({ 'position': 'absolute', 'z-index': '1', 'display': 'block', 'opacity': '1' });
                            settings.item.eq(n_idx).css({ 'position': 'absolute', 'z-index': '2', 'display': 'block' });
                            setTimeout(function () {
                                settings.item.eq(idx).removeClass('active');
                                settings.item.eq(n_idx).addClass('active');
                            }, 10);
                            setTimeout(function () {
                                settings.item.eq(n_idx).removeAttr('style'); settings.item.eq(idx).removeAttr('style');
                            }, 500);
                        } else {
                            settings.item.removeClass('active').eq(idx).css({ 'position': 'absolute', 'z-index': '1' }).stop(true, true).fadeOut(3e2, function () { $(this).removeClass('active').removeAttr('style'); });
                            settings.item.eq(n_idx).css({ 'position': 'absolute', 'z-index': '2' }).stop(true, true).fadeIn(3e2, function () { $(this).addClass('active').removeAttr('style'); })
                        }
                    } else if (settings.type == "scroll") {
                        if (settings.status) return;
                        settings.status = !0;
                        var scroll_w, css = { 'transition':'transform .3s ease'}, item_w = settings.item.eq(0).width(), item_css = {};
                        if (direction) {
                            n_idx = idx - 1 <= -1 ? settings.len : (idx - 1);
                            scroll_w = item_w* (n_idx);
                            if (n_idx == settings.len) {
                                n_idx = settings.len - 1;
                                scroll_w = item_w;
                                item_css = { 'position': 'relative', 'left': '-' + item_w * settings.len + 'px' };
                                setTimeout(function () {
                                    settings.item.eq(n_idx).css({ 'position': '', 'left': '' });
                                    settings.that.find('.i-slider-item').css({ 'transition': 'none', 'transform': 'translate3d(-' + item_w * n_idx + 'px,0px, 0px)' });
                                }, 3e2);
                                css.transform = 'translate3d(' + scroll_w + 'px, 0px, 0px)';
                            } else {
                                css.transform = 'translate3d(-' + scroll_w + 'px, 0px, 0px)';
                            }                            
                        } else {
                            n_idx = idx + 1 > settings.len ? 0 : (idx + 1);
                            scroll_w = item_w * (n_idx);
                            if (n_idx == settings.len) {
                                item_css = { 'position': 'relative', 'left': item_w * n_idx + 'px' };
                                n_idx = 0;
                                setTimeout(function () {
                                    settings.item.eq(n_idx).css({ 'position': '', 'left': ''});
                                    settings.that.find('.i-slider-item').css({ 'transition': 'none', 'transform': 'translate3d(0px,0px, 0px)'  });
                                }, 3e2);
                            }
                            css.transform = 'translate3d(-' + scroll_w + 'px, 0px, 0px)';
                        }
                        settings.item.removeClass('active').eq(n_idx).addClass('active').css(item_css);
                        settings.that.find('.i-slider-item').css(css);
                        setTimeout(function () { settings.status = !1; }, 3e2);
                    }
                    settings.page.find('.ui-pager-item').removeClass('active').eq(n_idx).addClass('active');
                };
                settings.next.on('click', function () {
                    _func(!1);
                });
                settings.prev.on('click', function () {
                    _func(!0);
                });
                settings.page.find('.ui-pager-item').on('mouseover', function () {
                    var n_idx = settings.page.find('.ui-pager-item').index(this), idx = settings.item.index(settings.that.find(".i-item.active")[0]);
                    _func(!0, n_idx, settings.item.eq(idx));
                });
                //init auto
                var t = setInterval(function () {
                    _func(!1);
                }, settings.time);
                //mouse hover
                settings.that.hover(
                    function () {
                        clearInterval(t);
                    },
                    function () {
                        t = setInterval(function () {
                            _func(!1);
                        }, settings.time);
                    }
                );
            };
        }($, window);

        $(function () {
            $('.i-slider').slider({ type: 'scroll', time: 3e3 });
        });

    </script>
</body>
</html>